<template>
	<view class="">
		<view class="search_w d-flex align-items">
			<!-- 左半边 -->
			<view class="d-flex align-items" @click="select_ciyt">
				<view class="city_txt">{{city_name}}</view>
				<image class="select_img" src="../static/san.png" mode="widthFix"></image>
			</view>
			<view class="line"></view>
			<view class="search_ipt">
				<input type="text" @blur="get_didian" class="iput" v-model="keyword" placeholder="搜索地点" />
			</view>
		</view>
		<!-- 接口返回列表 -->
		<view class="city_list">
			<view class="city_list_info d-flex" @click="adress_click(city)" v-for="(city,index) in citys" :key="index">
				<image class="dw001" src="../static/dw001.png" mode="widthFix"></image>
				<view class="">
					<view class="shiqu">{{city.title}}</view>
					<view class="adress-t">{{city.address}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				city_name:'请选择',
				citys:[{
					c_name:'石家庄市复产仲裁一石',
					c_adress:'中山东路206号十三家家电节似懂非懂竞赛放大洒基'
				},{
					c_name:'石家庄市复产仲裁一石',
					c_adress:'中山东路206号十三家家电节似懂非懂竞赛放大洒基'
				},{
					c_name:'石家庄市复产仲裁一石',
					c_adress:'中山东路206号十三家家电节似懂非懂竞赛放大洒基'
				},{
					c_name:'石家庄市复产仲裁一石',
					c_adress:'中山东路206号十三家家电节似懂非懂竞赛放大洒基'
				}],
				keyword:'',
			}
		},
		onLoad() {
			this.get_didian()
			uni.$on('changecity', res => {
				console.log('adress changecity', res);
				this.get_didian()
			})
		},
		onUnload() {
			uni.$off('changecity')
		},
		onShow() {
			this.city_name = uni.getStorageSync('cityName') || '请选择'
		},
		methods:{
			adress_click(city){
				console.log("选择城市",city);
				uni.setStorageSync("latLng",[city.location.lat, city.location.lng])
				uni.setStorageSync("adress_name",city.title)
				uni.$emit('changeaddress', {'lat':city.location.lat, 'lng':city.location.lng,'adress_name':city.title})
				let form = uni.getStorageSync('from')
				uni.removeStorageSync('from')
				if(form == 'index') {
					uni.switchTab({
						url:'/pages/index/index'
					})
				}
				if(form == 'fujin') {
					uni.switchTab({
						url:'/pages/jishi/jishi_list'
					})
				}
				if(form == 'ruzhu') {
					uni.redirectTo({
						url:'/pagesA/ruzhu/ruzhu'
					})
				}
				
			},
			// 获取地点
			get_didian(){
				var data = {
					lat:+uni.getStorageSync('latLng')[0],
					lng: +uni.getStorageSync('latLng')[1],
					keyword:this.keyword,
					city_name: uni.getStorageSync('cityName') || ''
				}
				get_poi_list(data).then(res => {
					console.log("获取地点",res);
					if(res.code == 1){
						this.citys = res.data
					}
				})
			},
			select_ciyt(){
				uni.navigateTo({
					url:'/pagesA/choose_adress/choose_city'
				})
			},
		}
	}
</script>

<style>
	.adress-t{
		font-size: 24rpx;
		color: #999;
	}
	.shiqu{
		font-size: 28rpx;
		color: #4a4a4a;
		margin-bottom: 8rpx;
	}
	.city_list_info{
		width: 650rpx;
		margin: auto;
		padding: 30rpx 0;
		border-bottom: 1px solid #f5f5f5;
	}
	.dw001{
		width: 30rpx;
		display: block;
		margin-top: 5rpx;
		margin-right: 10rpx;
	}
	.city_list {
		width: 690rpx;
		background: #fff;
		border-radius: 15rpx;
		margin: auto;
	}

	.iput {
		max-width: 470rpx;
		font-size: 28rpx;
		color: #333;
		padding-left: 20rpx;
	}

	.line {
		width: 1px;
		height: 30rpx;
		background-color: #a4a9b7;
		margin-left: 20rpx;
	}

	.select_img {
		width: 20rpx;
		display: block;
		margin-left: 10rpx;
	}

	.city_txt {
		font-size: 28rpx;
		color: #6b738b;
		margin-left: 20rpx;
	}

	.search_w {
		width: 690rpx;
		height: 70rpx;
		background: #fff;
		border-radius: 30rpx;
		margin: 30rpx auto;
	}

	page {
		background: #edf1f4;
	}
</style>